<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>制作非缘勿扰页面特效 </title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class='main'>
			<div class='left'>
				<img src="../img/pic(1).gif" />
				<br /><br />
				<img src="../img/col(1).gif" alt="收藏本片" />
			</div>
			<div class='right'>
				<dl>
					<dt>非缘勿扰</dt>
					<dd><span id="star">主演：</span>苏有朋/秦岚/傅艺伟等</dd>
					<dd><span id='director'>导演：</span><span title="导演">赖水清</span></dd>
					<dd><span id='label'>标签：</span><span>苏有朋</span> 国产电视剧 <span>2013</span> 连续剧 </dd>
					<dd><span id="drama">剧情：</span>当代都市，大年女刘林、杨阳都在寻找自己的如意郎君，刘林偶遇陆氏房地产总裁路西诺，两人成了欢喜冤家，遭到暗恋西诺的丁娟的嫉恨。。。<a href="#">点击了解更多
						</a></dd>
				</dl>
				<img src="../img/btn(1).gif" />
			</div>
		</div>
		<script type="text/javascript" src="jquery.3.6.3.js"></script>
		<script>
				$('dt').click(function() {
					$('dd span[id]').css({
						"color": "#FF0099",
						"font-weight": "bold"
					});
				});


				$("#director").click(function() {
					$("dd span[title]").css("font-weight", "bold");
				});


				$('#label').click(function() {
					$("#label~span").css({
						"background-color": "#E0F8EA",
						"color": "#10A14B",
						"padding": "2px 8px"
					});
				});

				$("img[alt]").click(function() {
					alert("您已收藏成功！");
				});
		</script>
	</body>
</html>
